<template>
  <div class="houxuanrenhuaxiang-box">
    <div class="houxuanrenbiaoqian-gerenjingzhenglimoxing">
      <div class="gerenjingzhenglimoxing">
        <div class="title-box no-margin">
          <span class="small-line"></span>个人竞争力模型
        </div>
        <div class="moxing-chart">
          <JingZhengLiMoXingChart />
        </div>
      </div>
      <div class="shuxian"></div>
      <div class="gerenjingzhenglimoxing">
        <div class="title-box"><span class="small-line"></span>综合能力</div>
        <div class="moxing-chart">
          <ZongHeNengLiChat />
        </div>
      </div>
    </div>

    <div class="hengxian"></div>
    <div class="yucezhineng">
      <div class="title-box"><span class="small-line"></span>背景行业</div>
      <div class="content">
        <BeiJingHangYeChart />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router';
import ResumeService from '@/api/resume';
import { onMounted, reactive, ref } from 'vue';
import _ from 'lodash';
import JingZhengLiMoXingChart from './JingZhengLiMoXingChart.vue';
import ZongHeNengLiChat from './ZongHeNengLiChat.vue';
import BeiJingHangYeChart from './BeiJingHangYeChart.vue';
// import YuCeZhiNengChart from './YuCeZhiNengChart.vue';

interface Resp {
  basic: TagType[];
  education: TagType[];
  others: TagType[];
  professional: TagType[];
  skills: TagType[];
}
interface TagType {
  tag: string;
  type: string;
}

const route = useRoute();
const params = route.params;
const { seekerId }: any = params;

const liangdianData = reactive({
  简历亮点: [] as any[],
  风险提示: [] as any[],
  智能预测: [] as any[],
});
const tagData = ref<any>([]);

function iconClassOfJianLiLiangDian(key: string) {
  if (key === '简历亮点') return 'jianliliangdian';
  if (key === '风险提示') return 'fengxiantishi';
  if (key === '智能预测') return 'zhinengyuce';
  return '';
}

async function selectResumeModel() {
  try {
    // "eduScore": 0,
    // "expScore": 0,
    // "skillScore": 0,
    // "stabilityScore": 0
    const resp = await ResumeService.selectResumeModel<any>({
      seekerResumeTypeEnum: 'online',
    });

    if (resp.code === 200) {
      const values = Object.values<any>(resp?.data || {});

      console.log(values);

      liangdianData.简历亮点 = _.flatten(values).filter(t => t);
    }
  } catch (error) {
    console.log(error);
  }
}

// async function _getResumePortraitByRisks() {
//   try {
//     const resp = await ResumeService.getResumePortraitByRisks<any>({
//       seekerId,
//     });
//     if (resp.code === 200) {
//       const values = Object.values<any>(resp?.data || {});
//       liangdianData.风险提示 = _.flatten(values).filter(t => t);
//     }
//   } catch (error) {
//     console.log(error);
//   }
// }

// async function _getResumePortraitByStability() {
//   try {
//     const resp = await ResumeService.getResumePortraitByStability<any>({
//       seekerId,
//     });
//     if (resp.code === 200) {
//       const salary = resp?.data?.salary || 0;
//       const turnover = resp?.data?.turnover || `0%`;

//       liangdianData.智能预测 = [
//         `结合工作经验、学历、行业、地域等因素，该求职者的时长薪资约为 ${salary} 元/月；`,
//         `小析智能助手从简历中发现了明显的跳槽理由，此求职者短期离职可能性 ${turnover}`,
//       ];
//     }
//   } catch (error) {
//     console.log(error);
//   }
// }

// async function _getResumePortraitByTags() {
//   const resp = await ResumeService.getResumePortraitByTags<Resp>({
//     seekerId: params.seekerId as string,
//   });
//   if (resp.code === 200) {
//     const { data } = resp;
//     if (!data) return;
//     if (
//       data.basic ||
//       data.education ||
//       data.professional ||
//       data.others ||
//       data.skills
//     )
//       tagData.value = [
//         {
//           name: '基本标签',
//           value: data.basic || [],
//           color: 'jiben',
//         },
//         {
//           name: '教育背景标签',
//           value: data.education || [],
//           color: 'jiaoyu',
//         },
//         {
//           name: '职业标签',
//           value: data.professional || [],
//           color: 'zhiye',
//         },
//         {
//           name: '其他信息标签',
//           value: data.others || [],
//           color: 'purple',
//         },
//         {
//           name: '专业技能标签',
//           value: data.skills || [],
//           color: 'zhuanye',
//         },
//       ];
//   }
// }

onMounted(() => {
  // selectResumeModel();
  // _getResumePortraitByRisks();
  // _getResumePortraitByStability();
  // _getResumePortraitByTags();
});
</script>

<style lang="less" scoped>
.houxuanrenhuaxiang-box {
  box-sizing: border-box;
  padding: 40px 0px 60px 0px;
  background-color: #fff;
  ul,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .hengxian {
    height: 1px;
    background: #eeeeee;
  }
  .shuxian {
    width: 1px;
    background: #eeeeee;
  }
  .title-box {
    font-size: 20px;
    font-family: AlibabaPuHuiTi_2_85_Bold;
    color: #141c37;
    display: flex;
    align-items: center;
    line-height: initial;
    position: relative;
    &.no-margin {
      margin-left: 0 !important;
    }
    .small-line {
      width: 4px;
      height: 18px;
      background: #6285ff;
      border-radius: 2px;
      display: block;
      margin-right: 6px;
      position: absolute;
      left: -10px;
    }
  }

  .houxuanrenbiaoqian-gerenjingzhenglimoxing {
    box-sizing: border-box;
    padding: 0 116px 100px 30px;
    display: flex;

    .gerenjingzhenglimoxing {
      flex: 1;
      box-sizing: border-box;
      min-height: 506px;
      display: flex;
      flex-direction: column;
      .title-box {
        margin-left: 34px;
      }
      .moxing-chart {
        flex: 1;
        position: relative;
        box-sizing: border-box;
      }
    }
  }
  .zonghenengli-beijinghangye {
    box-sizing: border-box;
    // padding: 50px 116px 50px 34px;
    flex: 1;
    display: flex;
    height: 451px;
    .zonghenengli {
      flex: 1;
      position: relative;
      display: flex;
      flex-direction: column;
      .content {
        flex: 1;
      }
    }
    .beijinghangye {
      flex: 1;
      box-sizing: border-box;
      position: relative;
      flex-direction: column;
      .title-box {
        margin-left: 34px;
      }

      .content {
        flex: 1;
      }
    }
  }

  .yucezhineng {
    box-sizing: border-box;
    padding-left: 34px;
    padding-right: 50px;
    .title-box {
      margin-top: 50px;
      margin-bottom: 42px;
    }
    .content {
      height: 300px;
      position: relative;
    }
  }
}
</style>
